<template>
  <div>
    <el-container>
      <!--<el-header class="common-home">-->
        <!--<div><span></span>商品审核</div>-->
        <!--<div class="refresh"><el-button icon="el-icon-refresh" @click.native="currentRefresh">刷新</el-button></div>-->
      <!--</el-header>-->
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div><i class="el-icon-search"></i> 筛选查询</div>
            <div><el-button @click.native="selectResults">查询结果</el-button></div>
          </el-header>
          <el-main class="info-main">
            <el-form ref="form" :model="form" label-width="100px">
              <el-form-item class="select-div" label="输入搜索：">
                <el-input placeholder="商品名称/商品货号" class="input-width" v-model="form.nameOrEncode"></el-input>
              </el-form-item>
              <el-form-item class="select-div" label="商品分类：">
                 <el-cascader
                  ref="myCascader"
                  v-model="form.category"
                  @change="handleCascader('myCascader')"
                  :props="cascader"
                  popper-class="category"
                  expand-trigger="hover"
                  placeholder="请选择商品分类"
                  clearable
                ></el-cascader>
              </el-form-item>
              <el-form-item class="select-div" label="商品品牌：">
                <el-select
                  v-model="form.brand"
                  placeholder="请选择商品品牌"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in brands"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-main>

      <el-footer>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div><i class="el-icon-s-fold"></i> 数据列表</div>
            <div>
          
              <el-select v-model="sort" class="input-width2" placeholder="排列方式">
               <el-option
                    v-for="item in sortOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
              </el-select>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table ref="multipleTable" @selection-change="handleSelectionChange" :data="tableData"  border style="width: 100%">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="id" label="编号" width="80"></el-table-column>
              <el-table-column label="商品图片" width="130">
                <template slot-scope="scope"><img :src="scope.row.image.url" width="80" height="50" /></template>
              </el-table-column>
             <el-table-column label="商品名称">
                  <template scope="scope">
                    <!-- <p style="text-align:left;">{{scope.row.name}}</p> -->
                    <p>{{ scope.row.name }}</p>
                    <p>品牌：{{ scope.row.brandName }}</p>
                  </template>
                </el-table-column>
              <el-table-column prop="encode" label="货号" width="180"> </el-table-column>
              <el-table-column prop="marketable" label="标签">
                 <template scope="scope">
                 <el-switch
                    
                      v-model="scope.row.marketable"
                      :active-value="true"
                      :inactive-value="false"
                      active-color="#13ce66"
                    ></el-switch>
                 </template>
                 </el-table-column>
             
              <el-table-column prop="sale" label="销量"> </el-table-column>
              <el-table-column prop="staLabel" label="审核状态"> </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button  size="mini" @click="handleSelect(scope.$index, scope.row)">查看</el-button>
                  <el-button  size="mini" @click="handleAudit(scope.$index, scope.row)">审核</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="info-foot">
            <el-checkbox @change="toggleSelectionCheckbox" v-model="checkbox">全选</el-checkbox>
            <el-select class="margin-left input-width2" v-model="moreOperation" placeholder="批量操作">
                  <el-option   label="" value="0"></el-option>
                  <el-option   label="" value="1"></el-option>
            </el-select>
            <el-button class="margin-left" @click.native="confirm">确定</el-button>
            <div class="paging-style">
              <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page.sync="currentPage1"
                         :page-sizes="pageSizes"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
              </el-pagination>
            </div>
          </el-footer>
        </el-container>
      </el-footer>
    </el-container>

    <el-dialog title="商品审核" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

      <el-form ref="goodsAudit" :model="goodsAudit" label-width="100px">
        <el-form-item label="商品名称：">
            {{goodsAudit.name}}
        </el-form-item>
        <el-form-item label="商品审核：">
          <el-radio-group v-model="goodsAudit.status">
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="1">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="反馈详情：">
          <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="goodsAudit.introduction"> </el-input>
        </el-form-item>
        <span class="dialog-footer" style="text-align: right;display: inline-block;width:100%;">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </el-form>
    </el-dialog>
  </div>
</template>

<script scoped>
import spuApi from "@/api/goods/spu";
import classifyApi from "@/api/goods/classify";
import brandApi from "@/api/goods/brand";
    export default {
        data() {
            return {
              // 获取品牌
brands:[],
              // 
                form:{
                   nameOrEncode: "",
                   category: [],
                    brand:"",
                },
                goodsAudit:{
                    id:"",
                    name:"",
                    status:"",
                    introduction:""
                },
                accordingPageSize:"",
             
            //  选中的ids
                multipleSelection: [],

                // 
                moreOperation:"",
          
                dialogVisible: false,
                checkbox: false,
                tableData: [],
                

// 排序选择
sortOptions: [
        {
          label: "商品编号",
          value: 0
        },
        {
          label: "商品名称",
          value: 1
        },
        {
          label: "商品货号",
          value: 2
        },
        {
          label: "上架状态",
          value: 3
        },
        {
          label: "销量",
          value: 4
        },
       
      
      ],

      // 分页数据
       pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 5,
      currentPage1: 1,
      sort: 0,


      // 筛选处理
       cascader: {
        checkStrictly: true,
        lazy: true,
        lazyLoad(node, resolve) {
          // const { level } = node; // = node.level
          const { value } = node;
          let parentId = value;
          if (parentId == undefined) {
            parentId = 0;
          }
          setTimeout(() => {
            classifyApi.getListById(parentId).then(result => {
              if (result.data.data.length > 0) {
                const nodes = Array.from(result.data.data).map(item => ({
                  value: item.categoryId,
                  label: item.categoryName
                  // 是否为叶子节点的标志位 (默认字段为leaf，可通过props.leaf修改)
                  // leaf: level > item.categoryLevel
                }));
                // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                resolve(nodes);
              } else {
                resolve();
              }
            });
          }, 1000);
        }
      },

            }
        },
        watch:{
"sort":function(){

   this.initTable();
},
        },
        methods:{
            currentRefresh(){
                this.$router.go(0);
            },
            selectResults(){
                this.initTable();
            },
            handleSelect(index, row) {
              this.$router.push({
        path: "/goods/details",
        // name: "modify",
        query: {
          id: row.id
        }
      });
            },
            handleAudit(index, row) {
                this.goodsAudit.name = row.name;
                this.goodsAudit.id=row.id;
                this.dialogVisible = true;
            },
            // 批量操作
            confirm(){
                console.log(this.multipleSelection);

                // 暂时留着

// if(this.moreOperation==0){

//   // 将获取的数据处理
//                 this.multipleSelection.forEach(v=>{

//                 })
// };

              
            },
            handleSizeChange(val) {
                 this.pageSize=val;
                  this.initTable();
            },
            handleCurrentChange(val) {

             
   
             this.currentPage1=val;
                this.initTable();
            },
            handleClose(done) {
                done();
            },
            handleSelectionChange(val) {
              
                if(val.length == this.tableData.length){
                    this.checkbox = true;
                }else if(val.length != this.tableData.length){
                    this.checkbox = false;
                };

                this.multipleSelection=[];
                // 获取选中的ids
                val.forEach(v=>{
               this.multipleSelection[this.multipleSelection.length]=v.id

                })


            },
            toggleSelectionCheckbox(){
              if(this.checkbox){
                  this.tableData.forEach(row => {
                      this.$refs.multipleTable.toggleRowSelection(row);
                  });
              }else{
                  this.$refs.multipleTable.clearSelection();
              }
            },
            // 执行审核
            onSubmit(){
               if(this.goodsAudit.status == ""){
                   this.$message({
                       type: 'warning',
                       message: '请选择商品审核！'
                   });
                   return;
               }
                if(this.goodsAudit.introduction == ""){
                    this.$message({
                        type: 'warning',
                        message: '请填写反馈详情！'
                    });
                    return;
                }

                this.handleSwitch(this.goodsAudit);
            },


// 将分类拼接起来
  arrayToString(arr) {
      var arrStr = "";
      arr.forEach((item, index) => {
        if (index == 0) {
          arrStr = item;
        } else {
          arrStr += ";" + item;
        }
      });
      return arrStr;
    },
// 获取页面数据
          initTable() {

  brandApi.listBaseInfo().then(result => {
        this.brands = result.data.data;
      });
            
      let match = {
        sort: this.sort - 0,
        nameOrEncode: this.form.nameOrEncode,
        brand: this.form.brand,
        category: this.arrayToString(this.form.category),
        audit: 0,
        available:0,
        pageNum: this.currentPage1,
        pageSize: this.pageSize
      };
      spuApi.pageMatchList(match).then(result => {
        this.tableData = result.data.data.list;
        this.tableData.forEach((item, index) => {
          let img = {
            url: null,
            name: "",
            size: null
          };
          if (item.image) {
            img = JSON.parse(item.image);
          }
          this.tableData[index].image = img;
        });
        this.total = result.data.data.total;
      });
    },

     // 审核修改
    handleSwitch(target) {
      var spu = {
        id: target.id,
        status: target.status,
        introduction:target.introduction
      };
      spuApi.updateById(spu).then(() => {
        this.initTable();
        this.$message("成功");
      });
    },
        },

        created(){
          this.initTable();
        }
    }
</script>
<style>
  .common-home,.content-header{
    border-bottom:1px solid #E4E4E4;
    position: relative;
  }
  .common-home>div{
    display: inline-block;
    width:100px;
    height:50px;
    vertical-align: top;
    text-align: center;
    line-height: 50px;
    color:#666666;
  }
  .common-home>.refresh{
    position: absolute;
    right:10px;
  }
  .common-home>div>span{
    border:4px solid #0399FE;
    display: inline-block;
    width: 0px;
    height: 15px;
    vertical-align: middle;
    margin-right: 5px;
    background-color: #0399FE;
  }
  .parent-body{
    border:1px solid #E4E4E4;
  }
  .content-header{
    height:50px;
    line-height: 50px;
    background-color:#F3F3F3;
    color:#666666;
    position: relative;
    text-align: left;
  }
  .info-main{
    background-color:#fff;
  }

  .content-header>div{
    display: inline-block;
  }
  .content-header>div:last-of-type{
    position: absolute;
    right:10px;
  }
  .input-width{
    width:200px;
  }
  .select-div{
    display: inline-block;
    width:300px;
  }
  .input-width2{
    width:120px;
  }
  .padding-style{
    padding:0 !important;
  }

  .info-foot{
    background-color:#FDFDFE;
    height:60px;
    line-height: 60px;
    position: relative;
  }
  .paging-style{
    position: absolute;
    right:10px;
    display: inline-block;
    top:15px;
  }
  .margin-left{
    margin-left:10px;
  }
</style>